<template>
  <div>
    <ly-dialog
      v-model="dialogVisible"
      :title="loadingTitle"
      width="560px"
      :before-close="handleClose"
    >
      <el-form
        :inline="false"
        :model="formData"
        :rules="rules"
        ref="rulesForm"
        label-position="right"
        label-width="130px"
      >
        <el-form-item label="账户名称：" prop="username">
          <el-input
            v-model.trim="formData.username"
            placeholder="请输入账户名"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码："
          prop="password"
          v-if="loadingTitle == '新增'"
        >
          <el-input
            v-model.trim="formData.password"
            placeholder="请输入密码"
            style="width: 300px"
            :disabled="loadingTitle == '详增'"
          ></el-input>
        </el-form-item>

        <el-form-item label="手机号：" prop="mobile">
          <el-input
            v-model.trim="formData.mobile"
            placeholder="请输入手机号"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <!-- <el-form-item label="所属区域：" prop="password">
                    <el-input v-model.trim="formData.region_name" placeholder="请输入所属区域" style="width: 300px"  :disabled="loadingTitle=='详情'"></el-input>
                </el-form-item>  -->
        <!-- <el-form-item label="权限分组：" prop="group_name">
                    <el-select v-model="formData.group_name" placeholder="请选择权限" clearable style="width: 300px" @change="search(1,$event)">
                        <el-option
                                v-for="item in GroupList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="权限地区："  prop="region_name">
                    <el-select  v-model="formData.region_name" placeholder="请选择地区" clearable style="width: 300px"  @change="search(2,$event)">
                        <el-option
                                v-for="item in AreaRootList"
                                :key="item.id"
                                :label="item.region_name"
                                :value="item.region_name">
                        </el-option>
                    </el-select>
                </el-form-item> -->
        <el-form-item label="督课管理权限：" inline-message=""> 
          <!-- <el-switch v-model="passwordSwitch"  /> --> 
          <el-switch v-model="formData.is_qstatus" :active-value="'2'" :inactive-value="'1'" />
          <!-- <el-input v-model.trim="formData.password" placeholder="请输入密码" style="width: 300px"  :disabled="loadingTitle=='详增'"></el-input> -->
        </el-form-item>
        <el-form-item
          label="是否修改密码："
          inline-message=""
          v-if="loadingTitle == '编辑'"
        >
          <el-switch v-model="passwordSwitch" />
          <!-- <el-input v-model.trim="formData.password" placeholder="请输入密码" style="width: 300px"  :disabled="loadingTitle=='详增'"></el-input> -->
        </el-form-item>
        <el-form-item
          label="修改密码："
          prop="passwordEdit"
          v-if="passwordSwitch"
        >
          <el-input
            v-model.trim="formData.passwordEdit"
            placeholder="请输入新密码"
            style="width: 300px"
            :disabled="loadingTitle == '详增'"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleClose" :loading="loadingSave">取消</el-button>
        <el-button
          type="primary"
          @click="submitData"
          :loading="loadingSave"
          :disabled="loadingTitle == '详情'"
          >确定</el-button
        >
      </template>
    </ly-dialog>
  </div>
</template>

<script>
import { rstaffAdd, rstaffUpdate, addressAreaRoot } from "@/api/api";
import LyDialog from "@/components/dialog/dialog.vue";
export default {
  emits: ["refreshData"],
  name: "addAdmin",
  components: { LyDialog },
  data() {
    return {
      dialogVisible: false,
      loadingSave: false,
      loadingTitle: "",
      formData: { 
      },
      rules: {
        region_name: [
          { required: true, message: "请输入地区名称", trigger: "blur" },
        ],
        username: [
          { required: true, message: "请输入账户名称", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        passwordEdit: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
        group_name: [
          { required: true, message: "请选择权限", trigger: "blur" },
        ],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
      },
      GroupList: [], //管理员分组列表
      AreaRootList: [], //区域列表获取
      passwordSwitch: false, //是否修改密码
    };
  },
  methods: {
    search(i, e) {
      console.log(e, "-------------this,eeeeeee");
      if (i === 1)
        this.formData.group_id = this.GroupList.find(
          (item) => item.name == e
        ).id;
      if (i === 2)
        this.formData.region_id = this.AreaRootList.find(
          (item) => item.region_name == e
        ).id;
    },
    handleClose() {
      this.dialogVisible = false;
      this.loadingSave = false;
      this.formData = {};
      this.passwordSwitch = false;
      this.$emit("refreshData");
    },
    addModuleFn(item, flag, GroupList) {
      this.loadingTitle = flag;
      this.dialogVisible = true;
      if (!this.GroupList.length) this.GroupList = GroupList;
      if (item) {
        this.formData={username:item.username,mobile:item.mobile,id:item.id,is_qstatus:item.is_qstatus}
      }
    },

    submitDataOne() {
      let vm = this;

      this.$refs["rulesForm"].validate((obj) => {
        if (obj) {
          this.loadingSave = true;

          if (vm.passwordSwitch && vm.formData.passwordEdit) {
            // 有修改密码 修改函数和原始密码函数替换 删除修改的函数
            vm.formData.password = vm.formData.passwordEdit;
            delete vm.formData.passwordEdit;
          }
          let param = {
            ...this.formData,
          };
          if (this.formData.id) {
            rstaffUpdate(param).then((res) => {
              this.loadingSave = false;
              if (res.code == 1) {
                this.$message.success(res.msg);
                this.handleClose();
                this.$emit("refreshData");
              } else {
                this.$message.warning(res.msg);
              }
            });
          } else {
            rstaffAdd(param).then((res) => {
              this.loadingSave = false;
              if (res.code == 1) {
                this.$message.success(res.msg);
                this.handleClose();
                this.$emit("refreshData", 1);
              } else {
                this.$message.warning(res.msg);
              }
            });
          }
        }
      });
    },
    submitData() {
      let vm = this;
      if (vm.passwordSwitch && vm.formData.passwordEdit) {
        vm.$confirm("您修改了改用户的原始密码，您确定要进行密码修改吗?", {
          closeOnClickModal: false,
        })
          .then((res) => {
            vm.submitDataOne();
          })
          .catch(() => {});
      } else {
        vm.submitDataOne();
      }
    },
    imgBeforeUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      if (!isJPG) {
        this.$message.error("图片只能是 JPG/PNG 格式!");
        return false;
      }
      return isJPG;
    },
    // async imgUploadRequest(param) {
    //     var vm = this
    //     let obj= await platformsettingsUploadPlatformImg(param)
    //     if(obj.code == 1) {
    //         let res=''
    //         if (obj.data.data[0].indexOf("://")>=0){
    //             res = obj.data.data[0]

    //         }else{
    //             res = url.split('/api')[0]+obj.data.data[0]
    //         }
    //         vm.formData.default_image = res
    //     } else {
    //         vm.$message.warning(res.msg)
    //     }
    // },
    imgUploadSuccess(res) {
      // if (res) {
      //     this.formData.image = res.url
      // }
    },
    getAreaRoot() {
      // 地区列表获取
      let objs = {
        page: 1,
        per_page: 999, //设置最长数据
      };
      addressAreaRoot(objs).then((res) => {
        if (res.code == 1) {
          console.log(res, "数据获取成功------------");
          this.AreaRootList = res.data.data;
        }
      });
    },
  },
  mounted() {
    console.log("开始获取，‘-----------");
    //this.getAreaRoot()
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}
.avatar {
  width: 128px;
  height: 128px;
  display: block;
}
</style>

